<template>
	<view>
		<navigator url="/pages/index/index" animation-type="slide-in-left" animation-duration="1"><button>跳转到首页</button>
		</navigator>
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import {
		useStore
	} from 'vuex';
	import {
		computed,
		ref,
		onMounted,
		reactive
	} from 'vue';
	export default {
		setup() {
			const store = useStore();
			const href = ref('https://uniapp.dcloud.io/component/README?id=uniui');
			const options = reactive([{
				icon: 'chat',
				text: '客服'
			}, {
				icon: 'shop',
				text: '店铺',
				info: 2,
				infoBackgroundColor: '#007aff',
				infoColor: "#f5f5f5"
			}, {
				icon: 'cart',
				text: '购物车',
				info: 2
			}]);
			const buttonGroup = reactive([{
					text: '加入购物车',
					backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
					color: '#fff'
				},
				{
					text: '立即购买',
					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					color: '#fff'
				}
			]);
			const counts = ref(store.getters.count);
			const getCounts = () => {

			}
			const onClick = (e) => {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			}
			const buttonClick = (e) => {
				console.log(e)
				this.options[2].info++
			}
			const getLocaion = () => {
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});
			}
			onMounted(() => {
				getCounts();
				getLocaion();
			})
			return {
				counts,
				getCounts,
				href,
				options,
				buttonClick,
				onClick,
				buttonGroup,
				getLocaion
			}
		}
	}
</script>

<style>
</style>